<template>
  <div class="add-inspection-task">
    <a-modal
      width="60%"
      :open="info.open"
      :title="info.title"
      wrapClassName="add-inspection-task"
      @ok="clickOk"
      @cancel="clickCancel"
    >
      <div class="item">
        <div class="text">任务名称</div>
        <a-input
          class="input"
          placeholder="请输入"
          v-model:value="formData.inspectionName"
        >
        </a-input>
      </div>
      <div class="item">
        <div class="text">任务类型</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.taskTypeId"
        >
          <a-select-option
            v-for="item in inspectionTaskTypeList"
            :key="item.typeId"
            :value="item.typeId"
            >{{ item.typeName }}</a-select-option
          >
        </a-select>
      </div>
      <div class="item">
        <div class="text">资源类型</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.resourceTypeId"
        >
          <a-select-option
            v-for="item in iResourceTypeList"
            :key="item.typeId"
            :value="item.typeId"
            >{{ item.typeName }}</a-select-option
          >
        </a-select>
      </div>
      <div class="item">
        <div class="text">调度类型</div>
        <a-radio-group
          button-style="solid"
          v-model:value="formData.scheduleTypeId"
          @change="changeScheduleTypeId"
        >
          <a-radio-button
            v-for="item in schedulingTypeList"
            :key="item.typeId"
            :value="item.typeId"
            >{{ item.typeName }}</a-radio-button
          >
        </a-radio-group>
      </div>
      <div class="item" v-if="isShowData.one">
        <div class="text">执行时间</div>
        <a-date-picker showTime v-model:value="executeTime" />
      </div>
      <div class="item" v-if="isShowData.two">
        <div class="text">执行周期</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.executeCycle"
        >
          <a-select-option :value="1">每天</a-select-option>
          <a-select-option :value="2">每周</a-select-option>
          <a-select-option :value="3">每月</a-select-option>
          <a-select-option :value="4">每季度</a-select-option>
        </a-select>
      </div>
      <div class="item" v-if="isShowData.three">
        <div class="text">时间</div>
        <a-time-picker v-model:value="formData.time" value-format="HH:mm:ss" />
      </div>
      <div class="item" v-if="isShowData.four">
        <div class="text">星期几</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.week"
        >
          <a-select-option :value="1">星期一</a-select-option>
          <a-select-option :value="2">星期二</a-select-option>
          <a-select-option :value="3">星期三</a-select-option>
          <a-select-option :value="4">星期四</a-select-option>
          <a-select-option :value="5">星期五</a-select-option>
          <a-select-option :value="6">星期六</a-select-option>
          <a-select-option :value="7">星期日</a-select-option>
        </a-select>
      </div>
      <div class="item" v-if="isShowData.four">
        <div class="text">时间</div>
        <a-time-picker v-model:value="formData.time" value-format="HH:mm:ss" />
      </div>
      <div class="item" v-if="isShowData.five">
        <div class="text">日期</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.day"
        >
          <a-select-option v-for="item in 31" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <div class="item" v-if="isShowData.five">
        <div class="text">时间</div>
        <a-time-picker v-model:value="formData.time" value-format="HH:mm:ss" />
      </div>
      <div class="item" v-if="isShowData.six">
        <div class="text">第几个月</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.month"
        >
          <a-select-option :value="1"> 第一个月 </a-select-option>
          <a-select-option :value="2"> 第二个月 </a-select-option>
          <a-select-option :value="3"> 第三个月 </a-select-option>
        </a-select>
      </div>
      <div class="item" v-if="isShowData.six">
        <div class="text">日期</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formData.day"
        >
          <a-select-option v-for="item in 31" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <div class="item" v-if="isShowData.six">
        <div class="text">时间</div>
        <a-time-picker v-model:value="formData.time" value-format="HH:mm:ss" />
      </div>
      <div class="item">
        <div class="text">巡检策略</div>
        <a-radio-group
          button-style="solid"
          v-model:value="formData.inspectionTypeId"
        >
          <a-radio-button :value="1">自定义</a-radio-button>
          <a-radio-button :value="0">全部</a-radio-button>
        </a-radio-group>
      </div>
      <div class="item" v-if="isShowData.seven">
        <a-input
          class="input input-query"
          placeholder="请输入IP或名称"
          v-model:value="formResourcesList.searchWord"
        ></a-input>
        <a-button type="primary" @click="clickQuery">查询</a-button>
      </div>
      <div v-if="isShowData.seven">
        <a-table
          class="table"
          :pagination="false"
          :columns="columns"
          :data-source="resourcesList"
          :row-selection="{
            selectedRowKeys: selectedRowKeysResources,
            onChange: onSelectChange,
          }"
        ></a-table>
        <a-pagination
          v-model:current="formResourcesList.pageNum"
          v-model:pageSize="formResourcesList.pageSize"
          :total="formResourcesList.total"
          show-less-items
          @change="changePagination"
        />
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  // 引入组件&方法
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import api from '@/axios/api.js'
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'
  const props = defineProps({
    info: {
      default: {
        open: false,
        title: '',
        record: undefined,
      },
    },
  })
  const emits = defineEmits(['cancel', 'updatePage'])
  const formData = ref({
    id: undefined,
    inspectionName: undefined, //巡检任务名称
    taskTypeId: undefined, //任务类型
    resourceTypeId: undefined, //资源类型id
    scheduleTypeId: undefined, //调度类型
    executeCycle: undefined, //执行周期 1.每天 2.每周 3.每月 4.每季度
    month: undefined, //第几个月(执行周期为每季度时填写)
    week: undefined, //星期几(执行周期为每周时填写)
    day: undefined, //日期
    executeTime: undefined, //	执行时间
    inspectionTypeId: undefined, //巡检资源 1自定义 2全部
    resourceIds: [], //巡检资源id集合
    time: undefined, //时间
  })
  const inspectionTaskTypeList = ref([]) //巡检任务类型列表
  const iResourceTypeList = ref([]) //获取资源类型列表
  const schedulingTypeList = ref([]) //获取调度类型
  const isShowData = ref({
    one: false,
    two: false,
    three: false,
    four: false,
    five: false,
    six: false,
    seven: false,
  })
  const resourcesList = ref([]) //资源列表
  const formResourcesList = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    taskId: undefined, //任务id
    typeId: undefined, //资源类型id
    searchWord: undefined, //检索条件
  }) //资源列表表单
  const columns = ref([
    {
      title: '资源名称',
      dataIndex: 'name',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
    },
    {
      title: '厂商',
      dataIndex: 'orgName',
    },
    {
      title: '资源型号',
      dataIndex: 'model',
    },
  ])
  const selectedRowKeysResources = ref([]) //选中的资源
  const executeTime = ref(undefined) //执行时间绑定值
  // 生命周期函数
  onMounted(() => {
    getInspectionTaskTypeList()
    getIResourceTypeList()
    getSchedulingTypeList()
  })

  watch(
    formData,
    value => {
      isShowData.value = {
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false,
        seven: false,
      }
      if (value.scheduleTypeId === 1) {
      } else if (value.scheduleTypeId === 2) {
        isShowData.value.one = true
      } else if (value.scheduleTypeId === 3) {
        isShowData.value.two = true
        if (value.executeCycle === 1) {
          isShowData.value.two = true
          isShowData.value.three = true
        } else if (value.executeCycle === 2) {
          isShowData.value.two = true
          isShowData.value.four = true
        } else if (value.executeCycle === 3) {
          isShowData.value.two = true
          isShowData.value.five = true
        } else if (value.executeCycle === 4) {
          isShowData.value.two = true
          isShowData.value.six = true
        }
      }
      if (value.inspectionTypeId === 0) {
      } else if (value.inspectionTypeId === 1) {
        isShowData.value.seven = true
      }
    },
    { deep: true, immediate: true }
  )
  // 自定义方法
  //获取巡检任务类型列表
  const getInspectionTaskTypeList = async () => {
    const res = await api.getInspectionTaskTypeList()
    console.log('获取巡检任务类型列表', res)
    inspectionTaskTypeList.value = res.data.data
  }
  //获取资源类型列表
  const getIResourceTypeList = async () => {
    const res = await api.getIResourceTypeList()
    console.log('获取资源类型列表', res)
    iResourceTypeList.value = res.data.data
    formData.value.resourceTypeId = res.data.data[0].typeId
    formResourcesList.value.typeId = formData.value.resourceTypeId
  }
  //获取调度类型列表
  const getSchedulingTypeList = async () => {
    const res = await api.getSchedulingTypeList()
    console.log('获取调度类型列表', res)
    schedulingTypeList.value = res.data.data
  }
  //新增巡检任务
  const addInspectionTask = async data => {
    const res = await api.addInspectionTask(data)
    if (res.data.code === 200) {
      message.success('新增成功')
      clickCancel()
      emits('updatePage')
    } else {
      message.error('新增失败')
    }
  }
  //获取资源列表
  const getResourcesList = async data => {
    const res = await api.getResourcesList(data)
    if (data.taskId) {
      console.log('获取选中的资源列表', res.data.data)
      selectedRowKeysResources.value = res.data.data.records.map(item => {
        return item.id
      })
      formData.value.resourceIds = res.data.data.records.map(item => {
        return item.id
      })
    }
    if (!data.taskId) {
      resourcesList.value = res.data.data.records.map(item => {
        return { ...item, key: item.id }
      })
      formResourcesList.value.total = res.data.data.total
      console.log('获取全部资源列表', res.data.data)
    }
  }
  //获取巡检任务详情
  const getInspectionTaskInfo = async data => {
    const res = await api.getInspectionTaskInfo(data)
    console.log('获取巡检任务详情', res)
    if (res.data.code === 200) {
      formData.value = res.data.data
      executeTime.value = dayjs(res.data.data.executeTime)
      formResourcesList.value.taskId = res.data.data.id
      getResourcesList(formResourcesList.value)
    }
  }
  //修改巡检任务
  const editInspectionTask = async data => {
    const res = await api.editInspectionTask(data)
    if (res.data.code === 200) {
      message.success('编辑成功')
      clickCancel()
      emits('updatePage')
    } else {
      message.error('编辑失败')
    }
  }
  //点击确定
  const clickOk = () => {
    formData.value.executeTime = dayjs(executeTime.value).format(
      'YYYY-MM-DD HH:mm:ss'
    )
    if (props.info.title === '新增巡检任务') {
      addInspectionTask(formData.value)
    } else if (props.info.title === '编辑巡检任务') {
      editInspectionTask(formData.value)
    }
  }
  //点击取消
  const clickCancel = () => {
    formData.value = {
      id: undefined,
      inspectionName: undefined, //巡检任务名称
      taskTypeId: undefined, //任务类型
      resourceTypeId: undefined, //资源类型id
      scheduleTypeId: undefined, //调度类型
      executeCycle: undefined, //执行周期 1.每天 2.每周 3.每月 4.每季度
      month: undefined, //第几个月(执行周期为每季度时填写)
      week: undefined, //星期几(执行周期为每周时填写)
      day: undefined, //日期
      executeTime: undefined, //	执行时间
      inspectionTypeId: undefined, //巡检资源 1自定义 2全部
      resourceIds: [], //巡检资源id集合
      time: undefined, //时间
    }
    executeTime.value = undefined
    selectedRowKeysResources.value = []
    emits('cancel')
  }
  //分页改变
  const changePagination = () => {
    getResourcesList({ ...formResourcesList.value, taskId: undefined })
  }
  //选中资源改变
  const onSelectChange = selectedRowKeys => {
    selectedRowKeysResources.value = selectedRowKeys
    formData.value.resourceIds = selectedRowKeys
  }
  //点击查询
  const clickQuery = () => {
    getResourcesList({ ...formResourcesList.value, taskId: undefined })
  }
  //调度类型改变
  const changeScheduleTypeId = () => {
    if (formData.value.scheduleTypeId === 1) {
      formData.value.executeTime = undefined
    } else if (formData.value.scheduleTypeId === 2) {
    } else if (formData.value.scheduleTypeId === 3) {
      formData.value.executeTime = undefined
    }
  }
  watch(
    () => props.info,
    newValue => {
      getInspectionTaskTypeList()
      getIResourceTypeList()
      getSchedulingTypeList()
      if (newValue.title === '新增巡检任务') {
        getResourcesList({ ...formResourcesList.value, taskId: undefined })
      } else if (newValue.title === '编辑巡检任务') {
        console.log('点击编辑', newValue)
        getResourcesList({ ...formResourcesList.value, taskId: undefined })
        getInspectionTaskInfo({ id: newValue.record.id })
      }
    },
    { deep: true, immediate: true }
  )
</script>
<style lang="less" scoped>
  .add-inspection-task {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: (20 / @vh);
      .text {
        margin-right: (10 / @vw);
        width: (100 / @vw);
        text-align: right;
      }
      .input {
        width: (300 / @vw);
      }
      &:last-child {
        margin-bottom: 0;
      }

      .input-query {
        margin-right: (10 / @vw);
      }
    }
    .table {
      margin-bottom: (20 / @vh);
      width: 100%;
    }
  }
</style>
